import { StyledMediaContainer } from '@/style/global'
import styled from 'styled-components'
import img from '@img/all.png'
export const StyledWrap = styled(StyledMediaContainer)`
	font-size: 12px;
	padding-top: 75px;
	.header {
		display: flex;
		justify-content: space-between;
		padding-bottom: 12px;
		.left-wrap {
			.title {
				font-size: 14px;
				font-weight: 700;
			}
			.detail-btn {
				color: #3e9bd0;
				cursor: pointer;
				display: inline-block;
				margin-left: 9px;
				text-decoration: underline;
			}
		}
	}
	.callers {
		display: flex;
		padding-bottom: 10px;
		.label {
			width: 100px;
		}
	}
	.mcc-footer {
		border-top: 2px solid #949799;
		height: 70px;
	}
	.sign-list-wrap {
		width: 535px;
		.list-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 6px;
		}
		.sign-list {
			height: 400px;
			border-top: 1px solid #949799;
			border-bottom: 1px solid #949799;
			padding-top: 24px;
			margin-bottom: 24px;
			color: #666666;
			overflow-y: auto;
			.sign-list-item {
				.name-wrap {
					display: flex;
					align-items: center;
					height: 24px;
					margin: 0 0 14px 7px;
					.avatar {
						position: relative;
						display: inline-block;
						height: 24px;
						width: 24px;
						.no-pass,
						.pass {
							position: absolute;
							top: 0;
							left: 0;
							height: 24px;
							width: 24px;
							background: url(${img});
						}
						.pass {
							background-position: 0 -891px;
						}
						.no-pass {
							background-position: -24px -891px;
						}
					}
					.name {
						margin-left: 11px;
					}
				}

				.remark {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: -10px;
					margin-left: 40px;
					color: #8b8b8b;
				}
			}
		}
	}
`
export const PopupWinStyle = styled.div`
	position: absolute;
	width: 435px;
	height: 370px;
	padding: 15px 10px 25px 25px;
	border: 1px solid #b3bbc3;
	background-color: white;
	color: rgb(78, 78, 78);
	font-size: 12px;
	.title {
		height: 30px;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	& > .content {
		height: 300px;
		overflow: auto;
		& > .line {
			height: 30px;
			display: flex;
			flex-direction: row;
			align-items: center;
			.line-left {
				width: 100px;
				display: flex;
				line-height: 20px;
			}
			.line-right {
				flex: 1;
				display: flex;
				&.live {
					align-items: center;
					.live-url {
						display: inline-block;
						height: 30px;
						line-height: 30px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 200px;
					}
					.live-url-copy {
						cursor: pointer;
						color: #1e94da;
						text-decoration: underline;
					}
				}
			}
		}
	}
`
